---
category: CSS
created: '2020-09-04'
title: margin vs padding
---

## Differences

1. `margin` is the space around the element.

    ```shell
    ┌──────────────────────┐               ┌──────────────────────┐
    |                      |               |                      |
    |                      |               |                      |
    |                      |◀︎── margin ───▶︎|                      |
    |                      |               |                      |
    |                      |               |                      |
    └──────────────────────┘               └──────────────────────┘
    ```

    Whereas `padding` is the space between an element and the content inside it. Both `margin` and `padding` do not include the border of element.

    ```shell
    ┌─────────────▲─────────────┐
    |             | Padding     |
    |             |             |
    |       ┌─────▼─────┐       |
    |       |           |       |
    |◀︎─────▶︎|           |◀︎─────▶︎|
    |       |           |       |
    |       |           |       |
    |       └─────▲─────┘       |
    |             |             |
    |             |             |
    └─────────────▼─────────────┘
    ```

2. The top and bottom margins are collapsible.

    Let's consider an example where we have two elements, `A` and `B`. The `A` element has 30px margin at the bottom, and `B` has 20px margin at the top.

    In final, the margin between two elements are the maximum numbers of two margin values, i.e 30px, not the total sum of them.

    ```shell
    ┌───────────────────────────┐
    |                           |
    |              A            |
    |                           |
    └───────┬───────────────────┘
            |
            |       ▲
    margin |       |
    bottom |       |
            |       | margin
            |       | top
            |       |
    ┌───────▼───────┴───────────┐
    |                           |
    |              B            |
    |                           |
    └───────────────────────────┘
    ```

    This does not happen with the left, right margins and any `padding` values.

3. We can set `margin: auto`, but it is not possible for `padding`. We often use `margin: auto` to center an element.
4. `margin` can be any float number, but `padding` cannot be a negative.

    ```css
    .div {
        margin: -10px;

        /* Not possible */
        padding: -15px;
    }
    ```

## See also

-   [border-box vs content-box](https://phuoc.ng/collection/this-vs-that/border-box-vs-content-box/)
